🔧 1. 构建优化类
    | 插件                                     | 作用                                   |
    | -------------------------------------- | ------------------------------------ |
    | **`DefinePlugin`**                     | 定义环境变量，如 `process.env.NODE_ENV`      |                     |
    | **`ESLintWebpackPlugin`**              | 在构建过程中检查代码规范（取代已废弃的 `eslint-loader`） |

📦 2. 资源生成与输出控制类
        | 插件                          | 作用                                 |
        | --------------------------- | ---------------------------------- |
        | **`HtmlWebpackPlugin`**     | 自动生成 HTML 文件，并注入打包好的 JS/CSS        |
        | **`MiniCssExtractPlugin`**  | 将 CSS 提取为独立文件（代替 style-loader）     |
        | **`CopyWebpackPlugin`**     | 复制静态资源到构建目录                        |
        | **`CleanWebpackPlugin`**    | 每次构建前清空 `dist` 目录                  |
        | **`WebpackManifestPlugin`** | 生成资源清单（manifest.json）用于映射 hash 文件名 |

⚙️ 3. 性能与体积分析类
    | 插件                         | 作用                |
    | -------------------------- | ----------------- |
    | **`BundleAnalyzerPlugin`** | 可视化分析打包体积，查看模块占比图 |
    | **`SpeedMeasurePlugin`**   | 分析各插件/loader 构建耗时 |
    | **`webpackbar`**           | 更漂亮的进度条显示插件       |

🗜️ 4. 代码压缩与优化类
    | 插件                         | 作用                 |
    | -------------------------- | ------------------ |
    | **`TerserWebpackPlugin`**  | 压缩 JS 代码（生产环境默认启用） |
    | **`CssMinimizerPlugin`**   | 压缩 CSS 代码          |
    | **`ImageMinimizerPlugin`** | 压缩图片体积             |

🧠 5. 开发体验类
    | 插件                                | 作用           |
    | --------------------------------- | ------------ |
    | **`HotModuleReplacementPlugin`**  | 开启热更新（HMR）功能 |
    | **`FriendlyErrorsWebpackPlugin`** | 更友好的构建错误输出   |
    | **`ReactRefreshWebpackPlugin`**   | React 热更新支持  |
    | **`ProgressPlugin`**              | 显示打包进度（百分比）  |



